<template>
  <div class="echarts h-full">
    <ECharts
      v-if="option"
      :option="option"
      :id="`pie` + props.id"
      ref="pieEChartsRef"
      :onClick="handleClick"
    />
  </div>
</template>

<script setup lang="ts">
import { ECOption } from "@/components/ECharts/config";
import ECharts from "@/components/ECharts/index.vue";
import * as echarts from "echarts/core";
const emit = defineEmits(["handle-click"]);

const props = defineProps({
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  type: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "工单总数";
    },
  },
  params: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

const { type, params, title } = toRefs(props);

function handleClick(param: any) {
  emit("handle-click", param.dataIndex);
}

const rich: any = {
  name: {
    color: "#666",
    fontSize: 12,
    // padding: [8, 30, 0, 30],
    fontWeight: "600",
    align: "left",
  },
  value: {
    color: "#333",
    fontSize: 14,
    padding: [0, 30, 8, 30],
    fontWeight: "500",
    align: "left",
  },
  percent: {
    color: "#FFF",
    align: "right",
    fontSize: 14,
    fontWeight: "400",
    //padding: [0, 5]
  },
};

const colorList2 = [
  "#006DFB",
  "#18dcff",
  "#313ca9",
  "#B4EC51",
  "#7d5fff",
  "#FFBC6D",
  "#51D9A2",
  "#f9e264",
  "#f47a75",
  "grey",
  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
    {
      offset: 0,
      color: "#04B9BD",
    },
    {
      offset: 1,
      color: "#76F2F8",
    },
  ]),
  "#765025",
];

//职称结构图表
const colorList = [
  "#006DFB",
  "#18dcff",
  "#B4EC51",
  "#7d5fff",
  //   "#bf19ff",
  //   "#854cff",
  //   "#5f45ff",
  //   "#02cdff",
  //   "#314976",
  "#f9e264",
  "#f47a75",
  "#009db2",
  "#024b51- 0780cf",
  "#765005",
];
const colorList1 = [
  "#bf19ff",
  "#854cff",
  "#5f45ff",
  "#02cdff",
  "#314976",
  "#f9e264",
  "#f47a75",
  "#009db2",
  "#024b51- 0780cf",
  "#765005",
];

const option = ref<ECOption>();
const xAxis = ref<string[]>([]);
const yAxis = ref<number[]>([]);
watch(
  () => params.value,
  (newValue) => {
    xAxis.value = [];
    yAxis.value = [];

    newValue?.map((e: any) => {
      xAxis.value = [...xAxis.value, e.name ?? ""];
      yAxis.value = [...yAxis.value, e.value ?? ""];
    });

    option.value = {
      title: {
        show: true,
        text: title.value,
        top: 15,
        left: "center",
      },
      legend: {
        // bottom: "center",
        bottom: 12,
        data: xAxis.value,
        orient: "horizontal",
        itemWidth: 12,
        itemHeight: 12,
        // itemStyle: { marginTop: 20 },
        textStyle: {
          padding: [3, 0, 0, 0],
          rich: {},
          color: "#666",
          //   color: "#fff",
          //   fontWeight: "normal",
          //   fontFamily: "宋体",
        },
      },
      tooltip: {
        trigger: "item",
      },
      series: [
        {
          itemStyle: {
            color: function (params) {
              return colorList[params?.dataIndex];
            },
          },
          type: "pie",
          radius: ["0%", "46%"],
          center: ["50%", "50%"],
          //   label: {
          //     position: "inner",
          //     formatter: (params: any) => {
          //       return "{percent|" + params.percent.toFixed(0) + "%}";
          //     },
          //     rich: rich,
          //   }
          label: {
            show: true,
            position: "outside",
            formatter: "{name|{c}} {b}",
            color: "#666",
            fontSize: 12,
            lineHeight: 20,
            rich: rich,
          },
          labelLine: {
            length: 10,
            length2: 10,
            lineStyle: {
              width: 1,
            },
          },
          data: params.value,
        },
        {
          itemStyle: {
            color: "#F2F9F7",
          },
          type: "pie",
          silent: true, // 取消高亮
          radius: ["0%", "55%"],
          center: ["50%", "50%"],
          data: params.value,
          label: {
            show: true,
            position: "inner",
            formatter: (params: any) => {
              return "{percent|" + params.percent.toFixed(0) + "%}";
            },
            rich: rich,
          },
          z: -1,
        },
      ],
    };
  },
  {
    deep: true,
    immediate: true,
  }
);

onMounted(() => {});
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  //   box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
  //   padding: 20px;
}
</style>
